<template>
  <div class="data-panel buttons">
    <ButtonGroup>
      <Button @click="() => { this.lf.zoom(true) }">放大</Button>
      <Button @click="() => { this.lf.zoom(false) }">缩小</Button>
      <Button @click="() => { this.lf.resetZoom() }">大小合适</Button>
      <Button @click="() => { this.lf.undo() }">上一步</Button>
      <Button @click="() => { this.lf.redo() }">下一步</Button>
      <Button @click="downloadImage">下载图片</Button>
      <Button @click="show">查看数据</Button>
      <Button @click="save">保存</Button>
      <Button @click="() => { this.$router.go(-1) }">关闭</Button>
    </ButtonGroup>
    <Modal v-model="opend" :closeOnMask="true" :hasCloseIcon="true" :hasDivider="true" :draggable="true">
      <template #header>查看数据</template>
      <Textarea v-model="content" rows="25" style="width: 600px;"></Textarea>
    </Modal>
  </div>
</template>
<script lang="ts">
import LogicFlow from '@logicflow/core';
import { lfJson2Xml, lfXml2Json } from "@logicflow/extension";
import { message } from 'heyui';

export default {
  name: "DataPanel",
  mounted() {
    this.id = this.$route.query.id;
    this.$get("/fwconfig/" + this.id).then(res => {
      this.content = res.data.data.content;
      if (!this.content) {
        return;
      }
      (this.$props.lf).render(JSON.parse(this.content));
    });
  },
  data() {
    return {
      opend: false,
      content: "",
      id: "",
    };
  },
  props: {
    lf: Object,

  },

  methods: {
    downloadImage() {
      (this.$props.lf).getSnapshot();
    },
    save() {
      const data = JSON.stringify((this.$props.lf).getGraphRawData());
      this.$put("/fwconfig/edit", { id: this.id, content: data }).then(res => {
        if (res.data.code == this.$success) {
          message.success(res.data.msg);
        }
      });

    },
    show() {
      this.content = JSON.stringify((this.$props.lf).getGraphRawData(), null, '\t');
      this.opend = true;
    }
  },
};
</script>
<style>
.data-panel {
  margin: 10px;
  position: absolute;
  top: 10;
  width: auto;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  z-index: 101;
}
</style>